<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		
			html,
			body {
				padding: 0;
				margin: 0;
			}
			
			canvas {
				display: block;
			}
		</style>
	</head>

	<body>
		<div id="canvasDiv">
			<canvas id="c"></canvas>
		</div>
	</body>

	<script src="lib/jquery/jquery.js"></script>
	<script>
		;
		(function() {

			'use strict'

			var c = document.getElementById('c');
			var ctx = c.getContext('2d');
			var w = c.width = window.innerWidth;
			var h = c.height = window.innerHeight;
			var cx = w / 2;
			var cy = h / 2;
			var Box = function(x, y, vx, color) {
				this.color = color;
				this.vx = vx;
				this.x = x;
				this.y = y;
				this.w = 10 + Math.random() * 50;
				this.h = 5 + Math.random() * 300;
			};
			Box.prototype = {
				constructor: Box,
				update: function() {
					this.x += this.vx;
					if(this.x < -this.w / 2) {
						this.x = w + this.w / 2;
					}
				},
				render: function(ctx) {
					ctx.save();
					ctx.fillStyle = this.color;
					ctx.translate(this.x, this.y);
					ctx.fillRect(-this.w / 2, -this.h, this.w, this.h);
					ctx.restore();
				}
			};

			var ctr = 50;
			var boxes = [];
			var boxes2 = [];
			var boxes3 = [];
			var box;
			var speed = -5;

			for(var i = 0; i < ctr; i++) {
				box = new Box(Math.random() * w, h, speed * 0.5, '#e5e5e5');
				boxes.push(box);
			}
			for(var i = 0; i < ctr; i++) {
				box = new Box(Math.random() * w, h, speed * 0.8, '#cccccc');
				boxes2.push(box);
			}
			for(var i = 0; i < ctr; i++) {
				box = new Box(Math.random() * w, h, speed, '#999999');
				boxes3.push(box);
			}

			requestAnimationFrame(function loop() {
				requestAnimationFrame(loop);
				ctx.clearRect(0, 0, w, h);
				ctx.globalAlpha = 0.9;
				for(var i = 0, len = boxes.length; i < len; i++) {
					box = boxes[i];
					box.update();
					box.render(ctx);
				}
				for(var i = 0, len = boxes2.length; i < len; i++) {
					box = boxes2[i];
					box.update();
					box.render(ctx);
				}
				for(var i = 0, len = boxes3.length; i < len; i++) {
					box = boxes3[i];
					box.update();
					box.render(ctx);
				}
			});

		})();
	</script>

</html>